<template>
  <el-dialog
    :visible.sync="visible"
    :title="dialogTitle"
    width="70%"
    height="80%"
    center
  >
    <el-form :model="formData" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="formData.title" :readonly="readonly"></el-input>
      </el-form-item>
      <el-form-item label="生效日期">
        <el-input
          v-model="formData.publishTime"
          :readonly="readonly"
        ></el-input>
      </el-form-item>
      <el-form-item label="失效日期">
        <el-input
          v-model="formData.publishTime"
          :readonly="readonly"
        ></el-input>
      </el-form-item>
      <el-form-item label="发布人">
        <el-input v-model="formData.publisher" :readonly="readonly"></el-input>
      </el-form-item>
      <el-form-item label="通知类型">
        <el-input v-model="formData.type" :readonly="readonly"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <div class="content-wrapper">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="editorMode"
          />
          <Editor
            style="height: 100px; overflow-y: hidden"
            v-model="formData.content"
            :defaultConfig="editorConfig"
            :mode="editorMode"
            @onCreated="onCreated"
          />
        </div>
      </el-form-item>
      <el-col :span="12">
        <el-form-item label="附件" prop="contrFile">
          <HelpUploadFile
            ref="uploadFile"
            :eidtabled="!readonly"
            multiple
            buttonName="添加附件"
            v-model="formData.contrFile"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="导入" prop="contrFile" v-if="!readonly">
          <HelpUploadFile
            ref="uploadFile"
            :eidtabled="!readonly"
            multiple
            buttonName="导入文本"
            v-model="formData.contrFile"
          />
        </el-form-item>
      </el-col>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="!readonly" type="primary" @click="submitForm"
        >提交</el-button
      >
      <el-button v-if="!readonly" @click="visible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { MODAL_TYPE, dialogTitleMap } from "../config";
/* import {
  addNotification,
  updateNotification,
  deleteNotification,
  getNotifications,
} from "../api/notification"; */
export default {
  components: {
    Editor,
    Toolbar,
  },
  props: {
    editVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          // 所有的菜单配置，都要在 MENU_CONF 属性下
          uploadImage: {
            async customUpload(file, insertFn) {
              console.log(file, "file--", insertFn); // file 即选中的文件 // 自己实现上传，并得到图片 url alt href // 最后插入图片 //insertFn(url, alt, href);
            },
          },
        },
      },
      editorMode: "default",
      dialogTitle: "",
      formData: {
        title: "",
        publishTime: "",
        publisher: "",
        content: "",
        interviewRecord: "",
      },
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      modalType: MODAL_TYPE.ADD,
    };
  },
  computed: {
    readonly() {
      return this.modalType === MODAL_TYPE.LOOK;
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    // 在这里定义组件的方法，可以用于处理逻辑和交互
    open({ modalType, row }) {
      this.visible = true;
      this.modalType = modalType;
      this.dialogTitle = dialogTitleMap[modalType];
      if (modalType === MODAL_TYPE.ADD) {
        this.formData = {};
      } else if (row) {
        this.formData = row;
      }
    },
    close() {
      this.visible = false;
    },
    onCreated(editor) {
      console.log(editor, "editor created");
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    submitForm() {
      // 在这里可以处理表单提交逻辑，例如通过 Ajax 提交数据到后端
      this.formData.content = this.editor.getText();
      console.log(this.editor.getText(), "this.editor.getText()");
      console.log(this.formData);
      this.close();
      /* addNotification(this.formData)
        .then(() => {
          this.editVisible = false;
          this.$message({
            message: "添加成功",
            type: "success",
          });
        })
        .catch((err) => {
          console.log(err);
        }); */
    },

    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped></style>
